<template>
  <div id="conter">
    <img :src="lesson.preview" alt="lesson.title" />
    <h3 @dblclick="isRevise=true">
      <input v-if="isRevise" type="text"
        :value="lesson.title"
        @input="changeTitle" 
        @blur="isRevise=false" @keyup.enter="isRevise=false"
        v-focus
        />
      <strong v-else>{{lesson.title}}</strong>
    </h3>
    <h3 @dblclick="isPriceRevise=true">
      <input v-if="isPriceRevise" type="text"
        :value="lesson.price"
        @input="$emit('update:price',$event.target.value)" 
        @blur="isPriceRevise=false" @keyup.enter="isPriceRevise=false"
        />
      <strong v-else>{{lesson.price}}</strong>
    </h3>
    <!-- <span class="del" @click="('del',lesson)">x</span> -->
    <span class="del" @click="del">x</span>
  </div>
</template>

<script>
export default {
  inheritAttrs:false,
  props:['lesson','title','price','titleModifiers'],
  emits:['del'],
    data() {
    return {
      isRevise:false,
      isPriceRevise:false
    }
  },
  methods: {
    del(){
      if(confirm('确定删除吗?'))
      this.$emit('del',this.lesson);
    },
    inputFocus(){
      console.log(1212);
    },
    changeTitle($event){
      let value = $event.target.value;
      if(this.titleModifiers.toupper){
        value = value.toUpperCase();
      }
      console.log(this.titleModifiers);
      const substr = Object.keys(this.titleModifiers).find(m=>/^substr_/.test(m));
      if(substr){
        let info = substr.split('_');
        value = value.substr(0,info[1]);
      }
      this.$emit('update:title',value);
    }
  },
  computed:{

  },
  directives:{
    focus: {
      mounted(el) {
        el.focus();
        console.log('自定义指令聚焦成功');
      },
    }
  },
}
</script>

<style scoped>
#conter{
  --boxs:8px;
  border-radius: var(--boxs);
  text-align: center;
  border: 1px solid rgb(44, 158, 167);
  position: relative;
}
#conter:hover{
  border-radius: var(--boxs);
  box-shadow: 0 0 10px rgb(54, 185, 142);
  transition:.5s;
}
#conter img{
  border-radius: var(--boxs);
  width: 100%;
}
h3{
  margin: 0;
  padding: 0;
  padding:0 0 10px 0;
  font-size: 15px;
}
.del{
  display: block;
  width: 20px;
  height: 20px;
  background-color: #353535;
  color:#fff;
  font-weight: 400;
  font-size: 18px;
  line-height: 18px;
  border-radius: 50%;
  position: absolute;
  top: 8px;
  right: 8px;
  cursor: pointer;
  transition: .5s;
  opacity: 0;
}
#conter:hover .del{
  opacity: 1;
}
</style>